<template>
  <div class="wrap">
    <template>
      <fill-header :step="0"/>
    </template>
    <div class="fill-wrap">
      <div class="fill-main flex flex-justify-around">
        <div class="fill-left">
          <div class="fill-content">
            <div class="title">
              <h2 class="blue">{{ $t('fillHeader.personInfo') }}</h2>
              <p>{{ $t('basic.tips') }}</p>  
            </div>
            <div class="progress">
              <div class="bar">
                <el-progress 
                  :percentage="0" 
                  :show-text="false" 
                  color="#8e71c7"/>
              </div>
              <span>0%</span>
            </div>
            <div class="form">
              <el-form 
                ref="form" 
                :model="form" 
                :rules="rules" 
                :show-message="false" 
                label-position="top">
                <el-form-item 
                  :label="$t('basic.name')" 
                  prop="name">
                  <el-input 
                    v-model="form.name" 
                    disabled/>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.idCard')" 
                  prop="idCard">
                  <el-input 
                    v-model="form.idCard" 
                    disabled/>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.idPublishDate')" 
                  prop="idCardAwardTime">
                  <el-date-picker
                    v-model="form.idCardAwardTime"
                    :picker-options="pickerBeforeToday"
                    type="date"
                    value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.birthDay')" 
                  prop="birthDay">
                  <el-date-picker
                    v-model="form.birthDay"
                    :default-value="timeDefaultShow"
                    :picker-options="pickerBeforeToday"
                    type="date" 
                    value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.sex')" 
                  prop="sex">
                  <el-radio-group v-model="form.sex">
                    <el-radio 
                      v-for="(item, i) in sexOption" 
                      :label="item.value" 
                      :key="i">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.education')" 
                  prop="degree">
                  <el-select v-model="form.degree">
                    <el-option
                      v-for="item in educationList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.marriage')" 
                  prop="marriage">
                  <el-select v-model="form.marriage">
                    <el-option
                      v-for="item in marriageList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.province')" 
                  prop="liveProvinceId">
                  <el-select 
                    v-model="form.liveProvinceId" 
                    @change="fetchChild(form.liveProvinceId || 0, 'county')">
                    <el-option
                      v-for="item in provinceList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.county')" 
                  prop="liveCityId">
                  <el-select 
                    v-model="form.liveCityId" 
                    @change="fetchChild(form.liveCityId || 0, 'street')">
                    <el-option
                      v-for="item in countyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.street')" 
                  prop="liveRegionId">
                  <el-select v-model="form.liveRegionId">
                    <el-option
                      v-for="item in streetList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item 
                  :label="$t('basic.detailed')" 
                  prop="liveAddress">
                  <el-input 
                    v-model="form.liveAddress" 
                    :maxlength="200" 
                    :placeholder="$t('basic.detailed_ph')"/>
                </el-form-item>
              </el-form>
              <div class="full-width flex flex-justify-center padding">
                <el-button 
                  :disabled="!nextEnabled" 
                  type="primary" 
                  round 
                  @click="save">{{ $t('login.goOn') }}</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="fill-right">
          <fill-right/>
        </div>
      </div>
    </div>
    
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>
<script>
import fillHeader from '../../components/fill-header'
import fillRight from '../../components/fill-right'
import sjx_Footer from '../../components/footer'
import base from '../../common/fn.js'
export default {
  components: {
    fillHeader,
    sjx_Footer,
    fillRight
  },
  data() {
    return {
      form: {
        name: '',
        idCard: '',
        idCardAwardTime: '',
        birthDay: '',
        sex: '',
        degree: '',
        marriage: '',
        liveProvinceId: '',
        liveCityId: '',
        liveRegionId: '',
        liveAddress: '',
        liveLatitude: 0,
        liveLongitude: 0
      },
      educationList: [],
      sexOption: [],
      marriageList: [],
      provinceList: [],
      countyList: [],
      streetList: [],
      rules: {
        name: [{ required: true, trigger: 'blur' }],
        idCard: [{ required: true, trigger: 'blur' }],
        idCardAwardTime: [{ required: true, trigger: 'blur' }],
        birthDay: [{ required: true, trigger: 'blur' }],
        sex: [{ required: true, trigger: 'change' }],
        degree: [{ required: true, trigger: 'change' }],
        marriage: [{ required: true, trigger: 'change' }],
        liveProvinceId: [{ required: true, trigger: 'change' }],
        liveCityId: [{ required: true, trigger: 'change' }],
        liveRegionId: [{ required: true, trigger: 'change' }],
        liveAddress: [
          {
            required: true,
            message: this.$t('basic.inputHouses'),
            trigger: 'blur'
          }
        ]
      },
      pickerBeforeToday: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      nextEnabled: true
      // timeDefaultShow:
    }
  },
  computed: {
    timeDefaultShow() {
      return this.getDate(30 * 12 * 30)
    }
  },
  mounted() {
    this.form.name = this.$store.state.name
    this.form.idCard = this.$store.state.idCard
    this.fetchSex()
    this.fetchEducation()
    this.fetchMarriage()
    this.fetchCity()
  },
  methods: {
    getDate(days) {
      var now = new Date()
      // if(days>=1){
      //   now=new Date(now.getTime()-86400000*days);
      // }
      var yyyy = now.getFullYear() - 30,
        mm = (now.getMonth() + 1).toString(),
        dd = now.getDate().toString()
      if (mm.length == 1) {
        mm = '0' + mm
      }
      if (dd.length == 1) {
        dd = '0' + dd
      }
      return yyyy + '-' + mm + '-' + dd
    },
    fetchSex() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'sex'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.optionValue })
          })
          this.sexOption = arr
        }
      })
    },
    fetchEducation() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'degree'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.optionValue })
          })
          this.educationList = arr
        }
      })
    },
    fetchMarriage() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'marriage'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.optionValue })
          })
          this.marriageList = arr
        }
      })
    },
    fetchCity() {
      const self = this
      let option = {
        header: {
          ...base,
          action: 'C0012'
        }
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.name, value: item.id, pid: item.pid })
          })
          this.provinceList = arr.sort(self.$store.getters.compare)
        }
      })
    },

    fetchChild(pid, desc) {
      const self = this
      let option = {
        header: {
          ...base,
          action: 'C0013'
        },
        pid: pid
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.name, value: item.id, pid: item.pid })
          })
          arr = arr.sort(self.$store.getters.compare)
          if (desc === 'county') {
            this.countyList = arr
          } else {
            this.streetList = arr
          }
        }
      })
    },
    save() {
      const self = this
      this.$refs['form'].validate(valid => {
        if (valid) {
          let option = {
            header: {
              ...base,
              action: 'U0004VN',
              sessionid: this.$store.state.sessionid
            },
            ...self.form
          }
          self.$axios.$post('', option).then(res => {
            if (res.header.code == 0 && res.data == 1) {
              self.nextEnabled = false
              this.$router.push('/job')
            } else {
              self.$message.error(res.header.msg)
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style>
.el-progress-bar__inner {
  background-color: #3462ff !important;
}
.el-progress-bar__outer {
  height: 9px !important;
}
.el-form--label-top .el-form-item__label {
  display: inline-block;
  text-align: left;
  padding: 0;
}
.el-select {
  width: 100%;
}
.el-button {
  background: #3462ff;
}
.el-button span {
  color: #fff !important;
  font-size: 16px;
}
</style>

<style lang="scss" scoped>
.fill-wrap {
  background: #f7f7f7;
  padding: 20px;
  .fill-main {
    width: 1200px;
    margin: 0 auto;
    .fill-left {
      background: #fff;
      width: 800px;
      .fill-content {
        padding: 15px;
        width: 500px;
        .title {
          width: 100%;
          padding: 10px;
          border-bottom: 1px solid #dcdfe6;
          h2 {
            font-size: 29px;
            font-weight: 700;
            line-height: 50px;
          }
          p {
            font-size: 16px;
            line-height: 30px;
            width: 720px;
            margin-bottom: 10px;
          }
        }
        .progress {
          position: relative;
          .bar {
            padding-top: 30px;
          }
          span {
            position: absolute;
            left: 0%;
            color: #3462ff;
          }
        }
        .form {
          padding-bottom: 20px;
          .el-button {
            width: 140px;
            height: 50px;
            border-radius: 25px;
            box-shadow: 2px 0px 13px rgba(48, 77, 220, 0.45);
          }
        }
      }
    }
    .fill-right {
      background: #fff;
      width: 317px;
      height: 416px;
    }
  }
}
</style>
